<template>
  <div class="bindingChildFacilityDialog">
    <el-dialog
      title="绑定子设备"
      :visible.sync="dialog.show"
      width="50%"
      destroy-on-close
    >
      <div class="titleTr">
        <div class="inputBox">
          <div class="label">设备ID：</div>
          <el-input
            placeholder="请输入设备ID"
            v-model="dialog.facilityId"
            size="small"
          />
          <div class="label" style="margin-left:30px;">设备名称：</div>
          <el-input
            placeholder="请输入设备名称"
            size="small"
            v-model="dialog.facilityName"
          />
        </div>
        <div class="btnGroup">
          <el-button size="small" type="primary" @click="searchFacility"
            >查询</el-button
          >
          <el-button size="small" @click="resetFacility">重置</el-button>
        </div>
      </div>
      <my-table
        class="tableContent"
        :isShowTotalBox="false"
        :tableConfig="tableConfig"
        :tableData="tableData"
        @selectChange="selectChange"
        @handleCurrentChange="handleCurrentChange"
        :pageInfo="pageInfo"
        :totalCount="total"
      >
        <template #state="scope">
          <div class="status">
            <div
              class="yuan"
              :style="{
                backgroundColor: scope.row.state == 0 ? '#f56c6c' : '#0DBC79'
              }"
            ></div>
            <span>{{ scope.row.state == 0 ? "离线" : "在线" }}</span>
          </div>
        </template>
      </my-table>

      <template slot="footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import myTable from "@/components/myTable/myTable.vue";
import { iotdevicepage, xqSelectList } from "@/url/api.js";
export default {
  components: { myTable },
  data() {
    return {
      dialog: {
        show: false,
        facilityId: "",
        facilityName: ""
      },
      tableData: [],
      tableConfig: [
        {
          prop: "id",
          label: "ID"
        },
        {
          prop: "name",
          label: "设备名称"
        },
        {
          prop: "productName",
          label: "产品名称"
        },
        {
          prop: "createTime",
          label: "注册时间"
        },
        {
          prop: "state",
          label: "状态",
          width: "100",
          slotName: "state"
        }
      ],
      selectData: [], //选中的设备
      whoClick: "", //谁点击的（触发器/执行动作）  用于子传父向外传出选择数据时告知类型

      // 对接接口新增所需数据
      xqId: "",
      pageInfo: {
        current: 1,
        size: 10
      },
      total: 0
    };
  },

  props: {},

  created() {
    this.getXqid();
  },
  methods: {
    // 搜索
    searchFacility() {
      this.pageInfo.current = 1;
      this.getFacilityList();
    },
    // 重置
    resetFacility() {
      this.dialog.facilityId = this.dialog.facilityName = "";
      this.getFacilityList();
    },

    // 选择监听
    selectChange(data) {
      this.selectData = data;
    },

    // 点击确定
    confirmHandle() {
      if (this.selectData.length > 1 || this.selectData.length === 0) {
        const str = "选择一个子设备进行绑定！";
        const msg = this.selectData.length === 0 ? "请" : "只能";
        this.$message.warning(msg + str);
        return;
      }
      const obj = this.selectData[0];
      obj.whoClick = this.whoClick; //添加是谁点击的type字段

      this.$emit("selectChange", obj);
      this.dialog.show = false;
    },

    //分页处理
    handleCurrentChange(e) {
      this.pageInfo.current = e;
      this.getFacilityList();
    },

    // 获取设备列表数据
    getFacilityList() {
      iotdevicepage({
        current: this.pageInfo.current,
        size: this.pageInfo.size,
        id: this.dialog.facilityId,
        name: this.dialog.facilityName,
        xqId: this.xqId
      }).then(({ data }) => {
        if (data.ok) {
          this.tableData = data.data.records;
          this.total = data.data.total * 1;
        }
      });
    },

    // 获取小区id
    getXqid() {
      xqSelectList({}).then(({ data }) => {
        if (data.ok) {
          this.xqId = data.data[0].id;
          this.getFacilityList();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.bindingChildFacilityDialog {
  .titleTr {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .inputBox {
      .label {
        white-space: nowrap;
        font-size: 14px;
      }
      display: flex;
      align-items: center;
    }
  }
  .status {
    display: flex;
    align-items: center;
    justify-content: center;
    .yuan {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .tableContent {
    /deep/ .table {
      padding: 0 !important;
      border-radius: 0;
    }
  }
}
</style>
